import React from 'react';
import { connect } from 'dva';
import { Icon,ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import content from '../common/contentCss/content.css';
import styles from './common.css';
import Screen from '../../../common/plugin/screen/screen';
import cutStr from '../../../framework/utils/cutStr';

import CustList from '../../../common/lists/CustomList';

function AllPartTime({ dispatch, loading, allPartTime, relations,partTime }) {

  const { typeArr, areasArr,cityName} = relations;

  const {pageNum,pages,jobList,isShow,ordey,hiddenArr,
    ordeyIndex,areaIndex,typeNameIndex,selectIndex,screenTabIndex } = allPartTime;

  let cName = cityName;

  if(!cName){
    cName = window.MC.cityName;
  }

  const partTimeListProps = {
      loading,
      list: jobList,
      // pages:allPartTime.jobList.pages,
      onViewMember(id) {
        onPartTimeDetailView(id);
      },
      onPagination() {

        if (loading || JSON.stringify(jobList) == "[]") {
          return;
        }

        if (parseInt(pageNum) >= parseInt(pages)) {
          return;
        }
        dispatch({
          type: 'allPartTime/query',
          payload: {
            pageNum: pageNum + 1,
          }
        })
      },
      showLimit(id){
        onPartTimeDetailView(id);
      }
    }


  const onPartTimeDetailView = (id) => {
    dispatch(routerRedux.push({
      pathname: '/part-time-detail',
      query: {
        id,
      }
    }));
  }

  const showScreen = () => {

    let showScreenStyles = [`${styles.screen}`];
    if(isShow != -1){
      showScreenStyles.push(`${styles.showScreenList}`)
    }

    const screenProps = {
      isShow,
      ordeyIndex,
      areaIndex,
      typeNameIndex,
      hiddenArr,
      selectIndex,
      list: jobList,
      ordey,
      areasArr,
      typeArr,
      onClickF(id){
        // console.log('id', id);
        let number=-1
        if ( id==isShow ) {
          number=-1
        } else if (id==1) {
          number = 1
        } else if (id==2) {
          number = 2
        } else {
          number = 3
        }
        dispatch({
          type: 'allPartTime/querySuccess',
          payload: {
            isShow: number,
            screenTabIndex:id
          }
        })
      },
      onSelect(id, index, itemData){
        if (id==1) {
          console.log('综合');
          dispatch({
            type: 'allPartTime/querySuccess',
            payload: {
              isShow: -1,
              selectIndex:1,
              ordeyIndex: index,
              key:itemData.value,
            }
          });
          dispatch({
            type: 'allPartTime/query',
            payload: {
            }
          })

        } else if (id==2) {
          console.log('区域');
            dispatch({
              type: 'allPartTime/querySuccess',
              payload: {
                isShow: -1,
                selectIndex:2,
                areaIndex:index,
                district:itemData.name
              }
            })
            dispatch({
              type: 'allPartTime/query',
              payload: {
              }
            })
        } else if (id==3) {
          console.log('类型');
          dispatch({
            type: 'allPartTime/querySuccess',
            payload: {
              isShow: -1,
              selectIndex:3,
              typeNameIndex: index,
              typeId:itemData.id
            }
          })
          dispatch({
            type: 'allPartTime/query',
            payload: {
            }
          })
        }
      },
      onSelectClose(){
        dispatch({
          type: 'allPartTime/querySuccess',
          payload: {
            isShow: -1,
          }
        })
      }
    }

    return (
      //<div className={showScreenStyles.join(' ')} onClick={() => cancelView(isShow,screenTabIndex)}>
      <div className={showScreenStyles.join(' ')}>
        <Screen {...screenProps} />
      </div>
    )
  }

  const onScreenPageView = () => {
    dispatch(routerRedux.push({
      pathname:'/screen-page'
    }))
  }

  const cancelView = (isShow,screenTabIndex) => {
    const showStatus = isShow;
    if(showStatus != -1){
      dispatch({
        type: 'allPartTime/querySuccess',
        payload: {
          isShow: -1,
        }
      })
    }
  }

  const MarginBottom = () => <div style={{height: '3.125em', backgroundColor:'#F2F2F2'}}></div>;

  const onCitySelect = () =>{
    dispatch(routerRedux.push({
      pathname: '/city-select',
    }))
  }

  return (
    <div className={content.content}>

      <div className={styles.title}>
        {cName ? (
          <div className={styles.selectedCity} onClick={() => onCitySelect()}>
            <span>{cutStr.cutString(cName, 6)}</span>
            <Icon type='down' size='md' color='#5e5e5e' />
          </div>
        ) : (
          <div className={styles.selectedCity} onClick={() => onCitySelect()}>
            <span>城市</span>
            <Icon type='down' size='md' color='#5e5e5e' />
          </div>
        )}

        <div className={styles.titleText}>全部兼职</div>
        {/* <div className={styles.complete} onClick={() => onScreenPageView()}>筛选</div> */}
      </div>
      {showScreen()}

      <div className={styles.jobList}>
        <CustList {...partTimeListProps}/>
      </div>
      {/* <MarginBottom/> */}
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    allPartTime: state.allPartTime,
    relations: state.relations,
    partTime: state.partTime,
  }
}

export default connect(mapStateToProps)(AllPartTime);
